<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>电商大数据管理平台</title>
		<link rel="icon" href="icon.ico">
		<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="css/dashboard.css">
		<link rel="stylesheet" href="plugins/datatables/css/dataTables.bootstrap.min.css">
		<link rel="stylesheet" href="css/datatables.css">
		<link rel="stylesheet" href="plugins/element-ui/theme-default/index.css" />
		<!--[if lt IE 9]>
      <script src="~/Static/scripts/html5shiv.min.js"></script>
      <script src="~/Static/scripts/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<div id="app">
			<nav class="navbar navbar-default navbar-fixed-top">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
						<a class="navbar-brand" href="#" style="font-size: x-large;"><strong><b>电商大数据管理平台</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></a>
					</div>
					<navbars :acv="bnav"></navbars>
				</div>
			</nav>

			<div class="container-fluid">
				<div class="row">
					<managenav :dsa="'第三方平台'"></managenav>
					<div class="col-sm-9 col-sm-offset-3 col-md-offset-2 col-md-10 main">
						<div class="row">
							<div class="col-xs-12">
								<h2 style="color: #0D81F5;"><b>第三方平台</b></h2></div>
						</div>

						<div class="panel-filter" style="border: 1px solid #ddd;">
							<form class="form-inline" role="form">
								<div class="form-group">
									<label for="platformAddress">地址：</label>
									<select name="address" id="platformAddress" class="form-control" v-model="otherPlatform.addressCode" @change="getData">
										<option value="">所有地区</option>
										<option v-for="item in dataOfAddressCode" :value="item.id">{{item.geoName}}</option>
										<option value="520600000000">无对应区县</option>
									</select>
								</div>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<div class="input-group">
									<input type="text" class="form-control" v-model="otherPlatform.storeName" placeholder="输入关键字搜索">
									<span class="input-group-btn">
										<button class="btn btn-default" type="button" @click="getData">搜索</button>
									</span>
								</div>
							</form>
						</div>
						<!--<table class="table table-bordered table-condensed table-hover table-striped display" width="100%" id="table-list"></table>-->
						<el-table :data="otherPlatform.searchData" stripe border style="width: 100%">
							<el-table-column label="店铺名称" align="center">
								<template scope="props">
									<a :href="props.row.storeUrl" target="_blank">{{props.row.storeName}}</a>
								</template>
							</el-table-column>
							<el-table-column prop="platformCategoryParents" label="归属父平台"></el-table-column>
							<el-table-column prop="platformCategory" label="归属平台"></el-table-column>
							<el-table-column prop="storeCategory" label="平台类型" width="120" :filters="otherPlatform.typeFilter" :filter-method="filterType"></el-table-column>
							<el-table-column prop="addressCode" label="地址码"></el-table-column>
							<el-table-column prop="addressDetail" label="地址详情"></el-table-column>
							<el-table-column prop="responsiblePerson" label="负责人"></el-table-column>
							<el-table-column prop="mobileNo" label="联系方式"></el-table-column>
							<el-table-column prop="employeeNum" label="员工数"></el-table-column>
							<el-table-column prop="businessVolume" label="交易量"></el-table-column>
							<el-table-column prop="tradingVolume" label="交易额"></el-table-column>
							<!--<el-table-column label="店铺网址" align="center">-->
								<!--<template scope="props">-->
									<!--<a :href="props.row.storeUrl" target="_blank">{{props.row.storeUrl}}</a>-->
								<!--</template>-->
							<!--</el-table-column>-->
						</el-table>
						<div class="text-center" style="margin: 10px 0;">
							<el-pagination @current-change="handleCurrentChange" :current-page="otherPlatform.currentPage" :page-size="otherPlatform.pageSize" layout="total, prev, pager, next, jumper" :total="otherPlatform.totalCount">
							</el-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="plugins/jquery/jquery.min.js"></script>
		<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="plugins/datatables/js/jquery.dataTables.min.js"></script>
		<script src="plugins/datatables/js/dataTables.bootstrap.min.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/nav.js"></script>
		<script src="plugins/element-ui/index.js"></script>
		<script src="js/common.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					bnav: {
						number: 1,
					},
					tab: 'tab1',
					dataOfAddressCode: [],
					otherPlatform: {
						currentPage: 1,
						pageSize: 10,
						addressCode: "",
						storeName: "",
						totalCount: 134,
						searchKey: '',
						tableData: [],
						searchData: [],
						typeFilter: [],
						addressFilter: [],
						platformFilter: []
					}
				},
				computed: {
					activeTabA: function() {
						return(this.tab !== 'tab2') ? 'tab-pane fade in active' : 'tab-pane fade';
					},
					activeTabB: function() {
						return(this.tab === 'tab2') ? 'tab-pane fade in active' : 'tab-pane fade';
					}
				},
				mounted: function() {
					this.getData();
					this.getAddressCode();
					this.tab = GetQueryString("tab");
				},
				methods: {
					arrUnique: function(arr, key) {
						var result = [],
							hash = {};
						for(var i = 0, elem;
							(elem = arr[i]) != null; i++) {
							var str = elem[key];
							if(!hash[str]) {
								hash[str] = true;
								result.push({
									text: str,
									value: str
								});
							}
						}
						return result;
					},
					getData: function() {
						var vm = this;
						$.ajax({
							type: "get",
							url: "/ebb/ebb/list/?start=" + vm.otherPlatform.currentPage + "&size=" + vm.otherPlatform.pageSize + "&type=1" + "&storeName=" + vm.otherPlatform.storeName + "&addressCode=" + vm.otherPlatform.addressCode,
							dataType: "json",
							async: false,
							success: function(data) {
								vm.otherPlatform.tableData = data.data;
								vm.otherPlatform.searchData = data.data;
								vm.otherPlatform.totalCount = data.totalCount;
								vm.otherPlatform.typeFilter = vm.arrUnique(vm.otherPlatform.tableData, 'storeCategory');
							},
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                if(XMLHttpRequest.status==401){
                                    //跳转到登录页,带上登录后的跳转地址redirect_uri=???
                                    // redirect_login();

                                    ShowTip("请先登录！", "success", 1000);
                                    setTimeout(function () {
                                        window.location.href = "login.html"
                                    }, 1000);
                                }
                            }
						});
					},
					getAddressCode: function() {
						var vm = this;
						$.ajax({
							type: "get",
							url: "ebb/geo/?addressCode=520600000000",
							dataType: "json",
							async: false,
							success: function(data) {
								vm.dataOfAddressCode = data;
							},
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                if(XMLHttpRequest.status==401){
                                    //跳转到登录页,带上登录后的跳转地址redirect_uri=???
                                    // redirect_login();

                                    ShowTip("请先登录！", "success", 1000);
                                    setTimeout(function () {
                                        window.location.href = "login.html"
                                    }, 1000);
                                }
                            }
						});
					},
					filterType: function(value, row) {
						return row.storeCategory === value;
					},
					handleCurrentChange: function(val) {
						$('html, body').animate({ scrollTop: 0 }, 500);
						this.otherPlatform.currentPage = val;
						this.getData();
					}
				}
			});
		</script>
		<script src="js/ie10-viewport-bug-workaround.js"></script>
	</body>

</html>